<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>mylabel</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<style>
			body {
				background-color: white;
			}
			
			.mui-bar-nav~.mui-content {
			    padding-top: 0;
			}
			
			.mui-bar {
				background-color: white;
			}
			/*头部下边框阴影*/
			
			.mui-bar-nav {
				box-shadow: 0 0 0 #ccc;
			}
			/*list下划线*/
			
			.mui-table-view:after {
				/*left: 15px;
				right: 10px;
				background-color: #E4E3E6;*/
				height: 0px;
			}
			/*添加标签的输入框*/
			
			#menu-wrapper {
				position: relative;
				/*top: 48px;
				left: 0;
				right: 0;
				z-index: 999;*/
				text-align: center;
				background-color: white;
				width: 100%;
				display: none;
				padding: 5px 5px 0 15px;
			}
			
			.menu {
				border-bottom: 1px solid #C7C7CC;
			}
			/*添加按钮*/
			
			#save {
				border: none;
				background-color: #609FFC;
				color: #FFFFFF;
				font-size: 13px;
				border-radius: 0;
				width: 60px;
			}
			
			a {
				color: black;
			}
			
			.mui-bar .atext {
				font-size: 16px;
				padding-top: 15px;
			}
			/*列表*/
			
			.mui-table h4,
			.mui-table h5,
			.mui-table .mui-h5,
			.mui-table .mui-h6,
			.mui-table p {
				margin-top: 0;
				color: black;
				font-weight: bold;
			}
			
			.mui-table h4 {
				line-height: 21px;
				font-weight: 500;
			}
			
			.mui-table .oa-icon {
				position: absolute;
				right: 0;
				bottom: 0;
			}
			
			.mui-table .oa-icon-star-filled {
				color: #f14e41;
			}
			
			.mui-popover {
				/*弹出框*/
				height: 100px;
				font-size: 12px;
				background-color: white;
				width: 60%;
			}
			
			.mui-popover .mui-popover-arrow:after {
				background: white;
			}
			
			.mui-icon-bars {
				display: none;
			}
			
			.mui-table-view-cell a {
				background-color: white
			}
			
			/*下划线*/
			.mui-table-view-cell:last-child:after {
				height: 1px;
			}
			
			.mui-table-view-cell:after {
				height: 1px;
				right: 10px;
			}
			
			.cell-colors {
				background-color: white
			}
			
			.mui-popover .mui-popover-arrow:after {
				width: 0;
			}
			
			.mui-icon-bars:before {
				color: black;
				content: '\e507';
			}
			
			.mui-backdrop {
				position: fixed;
				z-index: 998;
				background-color: rgba(0, 0, 0, 0);
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我的标签</h1>
			<a class="mui-icon-compose mui-icon mui-icon-right-nav mui-pull-right" id="menu-btn"></a>
		</header>

		<div class="mui-content">
			<div id="menu-wrapper">
				<div id="menu" class="menu">
					<input style="width: 75%;border: none;height:32px;font-size:13px" placeholder="请输入新的标签名称：" id="laber" />
					<button id="save">添加</button>
				</div>
			</div>
			<div id="list_box">
				<ul id="list-ul" class="mui-table-view ">

					<!--<li class="mui-table-view-cell">
						<div class="mui-table">
							<div class="mui-table-cell mui-col-xs-10">
								<p class="mui-h6 mui-ellipsis">Hi，aaa</p>
							</div>
							<div class="mui-table-cell mui-col-xs-2 mui-text-right">
								<span class="mui-h5">0</span>
								<a class="mui-action-menu mui-icon mui-icon-bars mui-pull-right" href="#topPopover"></a>
							</div>
						</div>
					</li>-->

				</ul>
			</div>
		</div>

		<!--弹出菜单-->
		<div id="topPopover" class="mui-popover">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							<a href="#" id="rename">重命名</a>
						</li>
						<li class="mui-table-view-cell">
							<a href="#" id="del">刪除</a>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<script src="js/mui.min.js"></script>
		<script src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript" charset="utf-8">
		
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			
			var label = null;
			var labelId =null;
			var labelName =null;
			var d = null;
			var token = null;
			var myUrl1 = null;
			
			window.addEventListener('refresh', function(e) {
				location.reload();
			});
			
			mui.plusReady(function(){
				token = plus.storage.getItem('accessToken');
				myUrl1=plus.storage.getItem("myUrl1");
				
				//我的标签列表
				mui.ajax(myUrl1+'/note-label/label/mylabelList?token='+token, {
					dataType: 'json', //服务器返回json格式数据
					type: 'get', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					headers: {
						'Content-Type': 'application/json'
					},
					success: function(e) {
						d = e;
						//console.log(e); 标签列表数据
						$("#list-ul").empty();
						for(i = 0; i < e.length; i++) {
							var labels = e[i];
							$("#list-ul").append('<li data="' + labels.id + '" name="'+ labels.labelName +'" class="mui-table-view-cell jump"><div class="mui-table"><div class="mui-table-cell mui-col-xs-10"><p class="mui-h6 mui-ellipsis">' + labels.labelName +
								'</p></div><div class="mui-table-cell mui-col-xs-2 mui-text-right"><span class="mui-h5">' + labels.notes +
								'</span><a href="#topPopover" data="' + labels.id + '" name="'+ labels.labelName +'"  class="mui-action-menu mui-icon mui-icon-bars mui-pull-right"  ></a></div></div></li>');
						}
					},
					error:function(xhr,type,errorThrown){
						//异常处理； 
						console.log(type);  
					}
				});
				
			})
			
			mui(".mui-bar").on('tap','.mui-title',function(){
                mui.openWindow({
					url:'thislabel.html',
					extras:{
						noteId: '9b45119af2e24a4595ae32c16587f701'
						
					}
				});
			})
			 
			mui("#list-ul").on('tap','.jump',function(){
                mui.openWindow({
					url:'label_notes.html',
					extras:{
						labelid: $(this).attr('data'),
						name: $(this).attr('name')
						
					}
				});
			})
			
			mui("#menu").on('tap','#save',function(){
				var name = $("#laber").val();
				var label = {
					"id": "",
					"labelName": name,
					"userId": token
				};
				if (name == "") {
					mui.toast('标签名不能为空',{ duration:'short', type:'div' }) 
				} else{
					var r = false;
					for(i = 0; i < d.length; i++) {
						var n = d[i].labelName;
						if(name == n){
							r = true;
						}
					}
					if (r) {
						mui.toast('该标签已存在',{ duration:'short', type:'div' }) 
					} else{
						mui.ajax(myUrl1+'/note-label/label/addLabels?token='+token, {
							data: JSON.stringify(label),
							dataType: 'json', //服务器返回json格式数据
							type: 'post', //HTTP请求类型
							timeout: 10000, //超时时间设置为10秒；
							headers: {
								'Content-Type': 'application/json'
							},
							success: function() {
								updatelist();
								$("#laber").val("");
							}
						});
					}
				}
			})
			 
			mui("#list-ul").on('tap','a',function(){
                labelId = $(this).attr('data');
                labelName = $(this).attr('name');
            })
			
			mui("#topPopover").on('tap','#rename',function(){
				//console.log(labelName);
	            mui('#topPopover').popover('hide');
	            mui.prompt('','','重命名',['取消','确定'],function(e){
//	            	console.log(e);
	            	if(e.index == 1){
	            		var val =  document.querySelector('.mui-popup-input input').value;
	            		labelName = val;
	            		var label = {
							"id": labelId,
							"labelName": val,
							"userId": "",
							"token": token
						};
						mui.ajax(myUrl1+'/note-label/label/update?token='+token, {
			            	data: JSON.stringify(label),
							dataType: 'json', //服务器返回json格式数据
							type: 'post', //HTTP请求类型
							timeout: 10000, //超时时间设置为10秒；
							headers: {
								'Content-Type': 'application/json'
							},
							success: function(data) {
								updatelist();
							}
						});
	            	}
	            },'div');
	            document.querySelector('.mui-popup-input input').value = labelName;
            })
			
			mui("#topPopover").on('tap','#del',function(){
				console.log(labelId);
				var label = {
						"id": labelId,
						"labelName": "",
						"userId": ""
					};
	            mui('#topPopover').popover('hide');
	            mui.ajax(myUrl1+'/note-label/label/del?token='+token, {
	            	data: JSON.stringify(label),
					dataType: 'json', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					headers: {
						'Content-Type': 'application/json'
					},
					success: function(data) {
						updatelist();
					}
				});
            })				
			
			function updatelist(){
				mui.ajax(myUrl1+'/note-label/label/mylabelList?token='+token, {
					dataType: 'json', //服务器返回json格式数据
					type: 'get', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					headers: {
						'Content-Type': 'application/json'
					},
					success: function(data) {
//						console.log(data);
						$("#list-ul").empty();
						for(i = 0; i < data.length; i++) {
							var labels = data[i];
							$("#list-ul").append('<li data="' + labels.id + '" name="'+ labels.labelName +'" class="mui-table-view-cell "><div class="mui-table"><div class="mui-table-cell mui-col-xs-10"><p class="mui-h6 mui-ellipsis">' + labels.labelName +
								'</p></div><div class="mui-table-cell mui-col-xs-2 mui-text-right"><span class="mui-h5" style="display: none;">' + labels.notes +
								'</span><a data="' + labels.id + '" name="'+ labels.labelName +'"  class="mui-action-menu mui-icon mui-icon-bars mui-pull-right" href="#topPopover" style="display: block;"></a></div></div></li>');
						};
						$("#list-ul .mui-table-view-cell").append("<style>.mui-table-view-cell::after{background-color: white}</style>");
					},
					error:function(xhr,type,errorThrown){
						//异常处理；
						console.log(type); 
					}
					
				});
			}

			$(document).ready(function() {

				var btn = true;
				$("#menu-btn").click(function() {
					$("#menu-wrapper").toggle(); //添加输入框
					if(btn) {
						$("#menu-btn").text("完成");
						$("#menu-btn").addClass("atext");
						$("#menu-btn").removeClass("mui-icon-compose");
						$("#list-ul li").removeClass("jump");
						$("#list-ul .mui-table-view-cell").append("<style>.mui-table-view-cell::after{background-color: white}</style>");
						btn = false;
					} else {
						$("#menu-btn").text("");
						$("#menu-btn").addClass("mui-icon-compose");
						$("#menu-btn").removeClass("atext");
						$("#list-ul li").addClass("jump");
						$("#list-ul .mui-table-view-cell").append("<style>.mui-table-view-cell::after{background-color: #c8c7cc}</style>");
						btn = true;
					}

					$(".mui-h5").toggle(); //该标签对应的笔记数量
					$(".mui-icon-bars").toggle(); //该标签对应的更多功能

				});

//				$("#save").click(function() {
//					var name = $("#laber").val();
//					var label = {
//						"id": "",
//						"labelName": name,
//						"userId": token
//					};
//					 
//					if (name == "") {
//						mui.toast('标签名不能为空',{ duration:'short', type:'div' }) 
//					} else{
//						var r = false;
//						for(i = 0; i < d.length; i++) {
//							var n = d[i].labelName;
//							if(name == n){
//								r = true;
//							}
//						}
//						if (r) {
//							mui.toast('该标签已存在',{ duration:'short', type:'div' }) 
//						} else{
//							mui.ajax(myUrl1+'/note-label/label/addLabel?token='+token, {
//								data: JSON.stringify(label),
//								dataType: 'json', //服务器返回json格式数据
//								type: 'post', //HTTP请求类型
//								timeout: 10000, //超时时间设置为10秒；
//								headers: {
//									'Content-Type': 'application/json'
//								},
//								success: function() {
//									updatelist();
//									$("#laber").val("");
//								}
//							});
//						}
//					}
//				})

			});
		</script>
	</body>

</html>